<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/layui.css" media="all"/>
    <!--引用百度地图API-->
    <style type="text/css">
        html,body{margin:0;padding:0;overflow: hidden;}
        .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
        .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
        .anchorBL{
            display:none;
        }

        *,layui-card,layui-card-body{
            margin:0px;
            padding:0px;
            border:0px;
        }
        a{
            color:#c6c6c6;
        }
        a:hover{
            color:#fff;
        }
        .table-user{
            width:200px;
        }
        .table-user .layui-card{
            width:100%;
            background-color:#0D0D0D;
            color:white;
        }

        .table-user .layui-card-header{
            color:#fff;
            background:#009688;
            font-weight: bolder;
            border-bottom: 0px;
        }

        .table-user .layui-card-body{
            height:500px;
            overflow-x:hidden ;
            overflow-y: auto;
        }
        .table-user .layui-card-body ul li{
            margin:10px 0px;
            width:100%;
            text-align: left;
        }
        .table-user .layui-card-body ul li .user img{
            padding:0 15px;
            width:50px;
            height:50px;
            border-radius:50%;
        }

        /*滚动条样式设置*/
        .table-user .layui-card .layui-card-body::-webkit-scrollbar,dl::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
        .table-user .layui-card .layui-card-body::-webkit-scrollbar-thumb,dl::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;     -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.1);
            background: rgba(0,0,255,0.05);
        }
        .table-user .layui-card .layui-card-body::-webkit-scrollbar-track,dl::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.1);
            border-radius: 0;
            background: rgba(0,0,255,0.05);
        }

    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${AK}"></script>
    <title>重点人管理</title>
</head>
<body width="100%" >
    <div class="layui-card" height="100%">
        <div class="layui-card-body" style="position:relative;padding:0px;border:0px;margin-bottom:0px;height:100%; ">
            <!--百度地图容器-->
            <div style="width:100%;height:1000px;" id="dituContent"></div>
            <%--搜索框--%>
            <div class="search" style="position:absolute;z-index: 99;top:5%;left:3%;">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline" style="margin-right:0px;">
                            <div class="layui-input-inline" style="margin-right:0px;">
                                <select name="username" lay-verify="required" lay-search="">
                                    <option value="">直接选择或搜索选择</option>
                                    <c:forEach items="${list}" var="person">
                                        <option value="${person.id}">${person.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <button class="layui-btn" data-type="reload" type="button">
                                    <i class="layui-icon layui-icon-search "></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <%--表格信息--%>
            <div class="table-user" id="drag" style="position:absolute;z-index: 99;top:20%;right:5%;" >
                <div class="layui-card">
                    <div class="layui-card-header">
                        重点人信息
                        <a href="javascript:void(0);" onclick="hidetable();"><i class="fa fa-window-close fa-fw" style="float: right;padding-top:15px;color:white;"></i></a>
                    </div>
                    <div class="layui-card-body">
                        <ul>
                            <c:forEach items="${list}" var="person">
                            <li>
                                <div class="user">
                                    <a href="#" data-id="${person.id}"><img src="/static/images/special/person.jpg" alt=""/><span>${person.name}</span></a>
                                </div>
                            </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/webjars/echarts/echarts.js"></script>
    <script src="/static/webjars/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/supervise/bmap.min.js"></script>
    <script type="text/javascript" src="/static/js/special/imp_person_show.js"></script>
    <script type="text/javascript" src="/static/js/supervise/imp/pop-windows.js"></script>
    <script type="text/javascript" src="/static/js/special/drag.js"></script>
    <script>


        function hidetable(){
            $("#drag").hide('normal');
        }
        layui.use('form', function(){
            var form = layui.form;
            form.render();
        });
    </script>
</body>
</html>